<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer.show"
    :wrapperClosable="false"
    direction="rtl"
    custom-class="add-drawer"
    ref="drawer"
    size="30%"
  >
    <el-form
      v-if="couponGrantForm"
      :rules="rules"
      :model="couponGrantForm"
      ref="cardFormRef"
      label-position="top"
    >
      <h2 class="title_line">券选择</h2>
      <div class="card-item">
        <el-row>
          <el-form-item label="优惠券" prop="couponIssueIdList">
            <el-select
              v-model="couponGrantForm.couponIssueIdList"
              placeholder="请选择优惠券"
              clearable
              multiple
              collapse-tags
              filterable
              size="small"
              style="width: 90%"
            >
              <el-option
                v-for="item in couponList"
                :key="item.id"
                :value="item.id"
                :label="item.couponRemark"
              >
                <span style="float: left">{{ item.couponRemark }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.id
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </div>
      <!-- <h2 class="title_line">消息推送</h2>
      <div class="card-item">
        <el-row>
          <el-form-item label="是否推送消息" prop="sendFlag">
            <el-radio-group v-model="couponGrantForm.sendFlag">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </div> -->
    </el-form>
    <div class="drawer__footer" style="margin: 0 10px 20px 0">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        v-if="drawer.type != 'view'"
        type="primary"
        @click="handleSubmit"
        >确定</el-button
      >
    </div>
  </el-drawer>
</template>
<script>
import { drawCoupons } from "@/api/coupon";
import { cloneDeep } from "lodash";

export default {
  props: {
    parm: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      drawer: {
        show: this.parm ? this.parm.drawerShow : false,
        type: this.parm ? this.parm.drawerType : "read",
      },
      couponList: this.parm ? this.parm.couponList : [],
      couponGrantForm: this.parm ? this.parm.couponGrantForm : {},
      cardData: this.parm ? this.parm.cardData : {},
      rules: {
        couponIssueIdList: [
          { required: true, message: "请选择优惠券", trigger: "change" },
        ],
        // sendFlag: [
        //   { required: true, message: "前选择是否推送消息", trigger: "change" },
        // ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.cardFormRef.validate((valid) => {
        if (valid) {
          let couponGrantForm = cloneDeep(this.couponGrantForm);
          console.log(couponGrantForm);
          this.$confirm(`确认发券吗？`).then(() => {
            drawCoupons(couponGrantForm).then((res) => {
              console.log(res);
              if (res && res.code === 200) {
                this.$message.success(res.msg);
                this.drawer.show = false;
                this.$emit("getData");
              } else {
                this.$message.error(res.msg);
              }
            });
          });
        }
      });
    },
    handleClose() {
      this.drawer.show = false;
    },
  },
  computed: {
    title() {
      let titleTypes = {
        view: "查看",
        add: "发券",
      };
      return titleTypes[this.drawer.type];
    },
  },
  watch: {
    parm(newValue) {
      console.log("newValue:", newValue);
      this.drawer.show = newValue.drawerShow;
      this.drawer.type = newValue.drawerType;
      this.couponList = newValue.couponList;
      this.cardData = newValue.cardData;
      this.couponGrantForm = newValue.couponGrantForm;
      this.$nextTick(() => {
        this.$refs.cardFormRef.clearValidate();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.flex-statu {
  display: flex;
  align-items: center;
}

.title_line {
  position: relative;
  font-size: 23px;
  margin-left: 30px;
}

.card-item {
  margin-left: 50px;
}

.title_line::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 5px;
  top: 6px;
  left: -10px;
  background-color: rgba(242, 131, 0, 1);
}

.drawer__footer {
  text-align: end;
}

::v-deep .add-drawer {
  overflow-y: auto;
}

::v-deep .cold_btn {
  background-color: rgba(170, 170, 170, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn {
  background-color: rgba(217, 0, 27, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_active {
  background-color: rgba(217, 0, 27, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .cold_active {
  background-color: rgba(170, 170, 170, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn:hover {
}
</style>
